<template>
  <div class="app-container personal-page">
    <!-- 现代化页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">个人信息页面</h1>
        <p class="page-subtitle">Welcome to your personal dashboard</p>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ new Date().getFullYear() }}</span>
            <span class="stat-label">当前年份</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ greeting }}</span>
            <span class="stat-label">问候语</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户个人信息模块 - 改进设计 -->
    <el-card class="info-card user-profile-card shadow-effect">
      <div slot="header" class="clearfix card-header">
        <h3 class="card-title"><i class="el-icon-user" style="margin-right: 8px;"></i> 用户个人信息</h3>
        <el-button 
          type="primary" 
          size="small" 
          @click="startEdit" 
          v-if="!isEditing"
          class="edit-btn"
          icon="el-icon-edit"
        >
          编辑
        </el-button>
      </div>
      <div class="user-info-content">
          <div class="user-avatar avatar-container">
            <transition name="scale">
              <div class="user-avatar-img">
                <span v-if="!userAvatar" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 36px; color: #667eea;">
                  <i class="el-icon-user"></i>
                </span>
                <img v-else :src="userAvatar" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;" />
                <div v-if="isEditing" class="avatar-edit-overlay" @click="triggerAvatarUpload">
                  <i class="el-icon-camera"></i>
                  <span>更换头像</span>
                </div>
              </div>
            </transition>
            <input type="file" ref="avatarInput" style="display: none;" accept="image/*" @change="handleAvatarUpload">
        </div>
        <div class="user-details">
            <!-- 编辑模式 -->
            <transition name="fade-transform" mode="out-in">
              <el-form 
                :key="'edit-form'"
                :model="editUser" 
                ref="editForm" 
                label-width="120px" 
                v-if="isEditing"
                class="edit-form modern-form"
              >
                <el-row :gutter="30">
                  <el-col :span="12">
                    <el-form-item label="用户姓名" class="info-item">
                      <el-input 
                        v-model="editUser.userName" 
                        placeholder="请输入姓名"
                        class="modern-input"
                        prefix-icon="user"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机号码" class="info-item">
                      <el-input 
                        v-model="editUser.phonenumber" 
                        placeholder="请输入手机号"
                        class="modern-input"
                        prefix-icon="mobile-phone"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="用户邮箱" class="info-item">
                      <el-input 
                        v-model="editUser.email" 
                        placeholder="请输入邮箱"
                        class="modern-input"
                        prefix-icon="message"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="form-actions">
                  <el-button 
                    type="primary" 
                    @click="saveChanges"
                    class="action-btn save-btn"
                    icon="el-icon-check"
                  >
                    保存
                  </el-button>
                  <el-button 
                    @click="cancelEdit"
                    class="action-btn cancel-btn"
                    icon="el-icon-close"
                  >
                    取消
                  </el-button>
                </div>
              </el-form>
            </transition>
            
            <!-- 查看模式 -->
            <transition name="fade-transform" mode="out-in">
              <template v-if="!isEditing">
                <div class="user-info-grid">
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-user"></i></div>
                    <div class="info-content">
                      <div class="info-label">用户姓名</div>
                      <div class="info-value">{{ user.userName }}</div>
                    </div>
                  </div>
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-mobile-phone"></i></div>
                    <div class="info-content">
                      <div class="info-label">手机号码</div>
                      <div class="info-value">{{ user.phonenumber }}</div>
                    </div>
                  </div>
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-message"></i></div>
                    <div class="info-content">
                      <div class="info-label">用户邮箱</div>
                      <div class="info-value">{{ user.email }}</div>
                    </div>
                  </div>
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-office-building"></i></div>
                    <div class="info-content">
                      <div class="info-label">所属部门</div>
                      <div class="info-value">{{ user.dept ? user.dept.deptName : '-' }}</div>
                    </div>
                  </div>
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-s-custom"></i></div>
                    <div class="info-content">
                      <div class="info-label">所属角色</div>
                      <div class="info-value">{{ roleGroup || '-' }}</div>
                    </div>
                  </div>
                  <div class="info-card-item">
                    <div class="info-icon"><i class="el-icon-time"></i></div>
                    <div class="info-content">
                      <div class="info-label">创建时间</div>
                      <div class="info-value">{{ user.createTime || '-' }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </transition>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="info-card thesis-card shadow-effect">
      <div slot="header" class="clearfix card-header">
        <h3 class="card-title"><i class="el-icon-document" style="margin-right: 8px;"></i> 毕业论文基本信息</h3>
        <el-button 
          type="primary" 
          size="small" 
          @click="startThesisEdit" 
          v-if="!isEditingThesis"
          class="edit-btn"
          icon="el-icon-edit"
        >
          编辑
        </el-button>
      </div>
      <div class="thesis-info">
        <!-- 编辑模式 -->
        <transition name="fade-transform" mode="out-in">
          <el-form 
            :key="'thesis-edit-form'"
            :model="editThesis" 
            ref="thesisForm" 
            label-width="120px" 
            v-if="isEditingThesis"
            class="edit-form modern-form"
          >
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="论文题目" class="info-item">
                  <el-input 
                    v-model="editThesis.title" 
                    placeholder="请输入论文题目"
                    class="modern-input"
                    prefix-icon="document"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="指导教师" class="info-item">
                  <el-input 
                    v-model="editThesis.mentor" 
                    placeholder="请输入指导教师"
                    class="modern-input"
                    prefix-icon="user-solid"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业方向" class="info-item">
                  <el-input 
                    v-model="editThesis.major" 
                    placeholder="请输入专业方向"
                    class="modern-input"
                    prefix-icon="reading"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="完成时间" class="info-item">
                  <el-input 
                    v-model="editThesis.completionTime" 
                    placeholder="请输入完成时间"
                    class="modern-input"
                    prefix-icon="date"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="论文摘要" class="info-item">
                  <el-input 
                    type="textarea" 
                    v-model="editThesis.abstract" 
                    placeholder="请输入论文摘要" 
                    :rows="4"
                    class="modern-input"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="form-actions">
              <el-button 
                    type="primary" 
                    @click="saveThesisChanges"
                    class="action-btn save-btn"
                    icon="el-icon-check"
                  >
                    保存
                  </el-button>
                  <el-button 
                    @click="cancelThesisEdit"
                    class="action-btn cancel-btn"
                    icon="el-icon-close"
                  >
                    取消
                  </el-button>
            </div>
          </el-form>
        </transition>
        
        <!-- 查看模式 -->
        <transition name="fade-transform" mode="out-in">
          <template v-if="!isEditingThesis">
            <div class="thesis-content">
              <div class="thesis-header">
                <h4 class="thesis-title">{{ thesis.title || '智能系统设计与实现' }}</h4>
                <div class="thesis-meta">
                  <span class="meta-item">
                    <i class="el-icon-user-solid"></i> 
                    {{ thesis.mentor || '张教授' }}
                  </span>
                  <span class="meta-item">
                    <i class="el-icon-reading"></i> 
                    {{ thesis.major || '计算机科学与技术' }}
                  </span>
                  <span class="meta-item">
                    <i class="el-icon-date"></i> 
                    {{ thesis.completionTime || '2025年6月' }}
                  </span>
                </div>
              </div>
              <div class="thesis-abstract">
                <h5 class="abstract-title"><i class="el-icon-document"></i> 论文摘要</h5>
                <p class="abstract-content">
                  {{ thesis.abstract || '本论文研究了智能系统的设计与实现方法，通过结合人工智能技术与实际应用场景，提出了一套完整的解决方案。研究过程中采用了深度学习、自然语言处理等技术，实现了系统的智能化、自动化功能。实验结果表明，该系统在性能和用户体验方面都达到了预期目标。' }}
                </p>
              </div>
            </div>
          </template>
        </transition>
      </div>
    </el-card>

    <!-- 毕业论文成果详细介绍模块 -->
    <el-card class="info-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-star" style="margin-right: 8px;"></i> 论文成果详细介绍</span>
      </div>
      <div class="achievement-details">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="研究内容" name="content">
            <div class="tab-content">
              <h4>主要研究内容</h4>
              <ul>
                <li>研究了智能系统的架构设计与实现方法</li>
                <li>开发了基于深度学习的数据分析模块</li>
                <li>实现了用户友好的交互界面</li>
                <li>进行了系统性能测试与优化</li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="创新点" name="innovation">
            <div class="tab-content">
              <h4>创新点</h4>
              <ul>
                <li>提出了一种新的智能算法，提高了系统的响应速度</li>
                <li>设计了模块化的系统架构，便于后续扩展</li>
                <li>优化了用户体验，提高了系统的易用性</li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="成果应用" name="application">
            <div class="tab-content">
              <h4>成果应用</h4>
              <ul>
                <li>该系统已在实际环境中得到应用</li>
                <li>提高了工作效率约30%</li>
                <li>减少了人工操作的错误率</li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="技术栈" name="tech">
            <div class="tab-content">
              <h4>技术栈</h4>
              <el-row :gutter="10">
                <el-col :xs="6" :sm="6" :md="4" :lg="3" v-for="tech in technologies" :key="tech">
                  <el-tag>{{ tech }}</el-tag>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user"

export default {
  name: "Index",
  components: {},
  // 添加beforeDestroy钩子，确保组件卸载时清理资源
  beforeDestroy() {
    // 清理可能的事件监听器或定时器
    this.$refs.avatarInput = null;
    this.editUser = {};
    this.editThesis = {};
  },
  data() {
    return {
      user: {
        userName: '郭鹏翔',
        phonenumber: '15705988152',
        email: '1296280661@qq.com'
      },
      editUser: {},
      isEditing: false,
      isEditingThesis: false,
      editThesis: {},
      roleGroup: {},
      postGroup: {},
      activeTab: 'content',
      thesis: {
        title: '',
        mentor: '',
        major: '',
        completionTime: '',
        abstract: ''
      },
      technologies: [
        'Vue.js', 'Spring Boot', 'MySQL', 'Redis', 'Python',
        'TensorFlow', 'NLP', 'Docker', 'Git', 'Linux'
      ],
      userAvatar: null
    }
  },
  computed: {
    // 问候语计算属性
    greeting() {
      const hour = new Date().getHours()
      if (hour < 12) return '早上好'
      if (hour < 18) return '下午好'
      return '晚上好'
    }
  },
  created() {
    this.getUserInfo();
    // 从localStorage读取保存的头像
    const savedAvatar = localStorage.getItem('userAvatar');
    if (savedAvatar) {
      this.userAvatar = savedAvatar;
    }
  },
  methods: {
    getUserInfo() {
      // 直接设置固定的用户信息
      this.user = {
        userName: '郭鹏翔',
        phonenumber: '15705988152',
        email: '1296280661@qq.com'
      }
      // 如果需要动态获取部门和角色信息，可以保留下面的代码
      getUserProfile().then(response => {
        this.user.dept = response.data.dept
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    },
    startEdit() {
      // 复制当前用户信息到编辑对象
      this.editUser = { ...this.user }
      this.isEditing = true
    },
    saveChanges() {
    // 保存编辑后的信息
    this.user = Object.assign({}, this.editUser);
    this.isEditing = false;
    this.$message.success('个人信息已更新');
  },
    // 触发头像上传
    triggerAvatarUpload() {
      this.$refs.avatarInput.click()
    },
    // 处理头像上传
    handleAvatarUpload(event) {
      const file = event.target.files[0]
      if (file) {
        // 检查文件类型
        if (!file.type.match('image.*')) {
          this.$message.error('请选择图片文件')
          return
        }
        
        // 检查文件大小（限制为2MB）
        if (file.size > 2 * 1024 * 1024) {
          this.$message.error('图片大小不能超过2MB')
          return
        }
        
        // 创建图片预览
        const reader = new FileReader();
        reader.onload = (e) => {
          this.userAvatar = e.target.result;
          // 保存到localStorage实现持久化
          localStorage.setItem('userAvatar', this.userAvatar);
          this.$message.success('头像已更新');
        };
        reader.readAsDataURL(file);
        
        // 清空文件输入，以便可以重复上传同一文件
        event.target.value = ''
      }
    },
    cancelEdit() {
      // 取消编辑
      this.isEditing = false
      if (this.$refs.editForm) {
        this.$refs.editForm.resetFields()
      }
    },
    startThesisEdit() {
      // 复制当前论文信息到编辑对象
      this.editThesis = { ...this.thesis }
      this.isEditingThesis = true
    },
    saveThesisChanges() {
    // 保存编辑后的论文信息
    this.thesis = Object.assign({}, this.editThesis);
    this.isEditingThesis = false;
    this.$message.success('毕业论文信息已更新');
  },
    cancelThesisEdit() {
      // 取消论文信息编辑
      this.isEditingThesis = false
      if (this.$refs.thesisForm) {
        this.$refs.thesisForm.resetFields()
      }
    }
  }
}
</script>

<style scoped>
.personal-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 现代化页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 30px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
  position: relative;
  overflow: hidden;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0 0 20px 0;
  font-weight: 300;
}

.header-stats {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.stat-item {
  background: rgba(255, 255, 255, 0.15);
  padding: 15px 25px;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 卡片通用样式 */
.info-card {
  margin-bottom: 30px;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  background: white;
}

/* 卡片头部 */
.card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: none;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 6px 16px;
}

.edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* 用户信息内容 */
.user-info-content {
  padding: 30px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.user-avatar {
  flex-shrink: 0;
}

.avatar-container {
  position: relative;
  transition: transform 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
}

.user-avatar-img {
  width: 140px;
  height: 140px;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

/* 头像编辑覆盖层 */
.avatar-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.user-avatar-img:hover .avatar-edit-overlay {
  opacity: 1;
}

.avatar-edit-overlay i {
  font-size: 24px;
  margin-bottom: 5px;
}

.avatar-edit-overlay span {
  font-size: 14px;
}

.user-details {
  flex: 1;
  min-width: 0;
}

/* 用户信息网格 */
.user-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.info-card-item {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

.info-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
  font-weight: 500;
}

.info-value {
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 600;
  word-break: break-all;
}

/* 现代化表单样式 */
.modern-form {
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.modern-input {
  border-radius: 8px !important;
  border-color: #e9ecef !important;
  transition: all 0.3s ease !important;
  background: #fafbfc !important;
}

.modern-input:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
  background: #ffffff !important;
}

.info-item {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.action-btn {
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
}

.save-btn {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.save-btn:hover {
  box-shadow: 0 4px 10px rgba(72, 187, 120, 0.2);
}

.cancel-btn {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.cancel-btn:hover {
  box-shadow: 0 4px 10px rgba(237, 137, 54, 0.2);
}

/* 毕业论文信息样式 */
.thesis-card {
  margin-top: 30px;
}

.thesis-content {
  padding: 20px 0;
}

.thesis-header {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 30px;
}

.thesis-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.4;
}

.thesis-meta {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 1rem;
  background: #f8f9fa;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.meta-item:hover {
  background: #667eea;
  color: white;
}

.thesis-abstract {
  margin-top: 30px;
}

.abstract-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.abstract-content {
  line-height: 1.8;
  color: #555;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border-left: 4px solid #667eea;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: justify;
}

/* 简化的动画效果 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: opacity 0.2s ease;
}

.fade-transform-enter,
.fade-transform-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .user-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .personal-page {
    padding: 10px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .user-info-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  
  .header-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .user-info-grid {
    grid-template-columns: 1fr;
  }
  
  .thesis-meta {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  
  .meta-item {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .user-info-content {
    padding: 20px 15px;
  }
  
  .user-avatar-img {
    width: 120px;
    height: 120px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* 加载动画效果 */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}
</style>